<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>仪表图</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" href="favicon.ico">
	<link rel="stylesheet" href="../../assets/css/main.css">
</head>
<body>
<div class="x-body">
	<blockquote class="layui-elem-quote">
		特别声明：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的
		Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。如需使用，详细了解可以访问官网 <a href="http://echarts.baidu.com/"
																		  style="color:red">ECharts</a>。
		x-admin不承担任何版权问题。
	</blockquote>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="main" style="width: 100%;height:400px;"></div>
	<blockquote class="layui-elem-quote">
		注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离想，请至Echarts官网下载。
	</blockquote>
</div>
<script src="//cdn.bootcss.com/echarts/3.3.2/echarts.min.js" charset="utf-8"></script>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));

	// 指定图表的配置项和数据
	option = {
		tooltip: {
			formatter: "{a} <br/>{c} {b}"
		},
		toolbox: {
			show: true,
			feature: {
				restore: {show: true},
				saveAsImage: {show: true}
			}
		},
		series: [
			{
				name: '速度',
				type: 'gauge',
				z: 3,
				min: 0,
				max: 220,
				splitNumber: 11,
				radius: '50%',
				axisLine: {            // 坐标轴线
					lineStyle: {       // 属性lineStyle控制线条样式
						width: 10
					}
				},
				axisTick: {            // 坐标轴小标记
					length: 15,        // 属性length控制线长
					lineStyle: {       // 属性lineStyle控制线条样式
						color: 'auto'
					}
				},
				splitLine: {           // 分隔线
					length: 20,         // 属性length控制线长
					lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
						color: 'auto'
					}
				},
				title: {
					textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
						fontWeight: 'bolder',
						fontSize: 20,
						fontStyle: 'italic'
					}
				},
				detail: {
					textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
						fontWeight: 'bolder'
					}
				},
				data: [{value: 40, name: 'km/h'}]
			},
			{
				name: '转速',
				type: 'gauge',
				center: ['20%', '55%'],    // 默认全局居中
				radius: '35%',
				min: 0,
				max: 7,
				endAngle: 45,
				splitNumber: 7,
				axisLine: {            // 坐标轴线
					lineStyle: {       // 属性lineStyle控制线条样式
						width: 8
					}
				},
				axisTick: {            // 坐标轴小标记
					length: 12,        // 属性length控制线长
					lineStyle: {       // 属性lineStyle控制线条样式
						color: 'auto'
					}
				},
				splitLine: {           // 分隔线
					length: 20,         // 属性length控制线长
					lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
						color: 'auto'
					}
				},
				pointer: {
					width: 5
				},
				title: {
					offsetCenter: [0, '-30%'],       // x, y，单位px
				},
				detail: {
					textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
						fontWeight: 'bolder'
					}
				},
				data: [{value: 1.5, name: 'x1000 r/min'}]
			},
			{
				name: '油表',
				type: 'gauge',
				center: ['77%', '50%'],    // 默认全局居中
				radius: '25%',
				min: 0,
				max: 2,
				startAngle: 135,
				endAngle: 45,
				splitNumber: 2,
				axisLine: {            // 坐标轴线
					lineStyle: {       // 属性lineStyle控制线条样式
						width: 8
					}
				},
				axisTick: {            // 坐标轴小标记
					splitNumber: 5,
					length: 10,        // 属性length控制线长
					lineStyle: {       // 属性lineStyle控制线条样式
						color: 'auto'
					}
				},
				axisLabel: {
					formatter: function (v) {
						switch (v + '') {
							case '0' :
								return 'E';
							case '1' :
								return 'Gas';
							case '2' :
								return 'F';
						}
					}
				},
				splitLine: {           // 分隔线
					length: 15,         // 属性length控制线长
					lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
						color: 'auto'
					}
				},
				pointer: {
					width: 2
				},
				title: {
					show: false
				},
				detail: {
					show: false
				},
				data: [{value: 0.5, name: 'gas'}]
			},
			{
				name: '水表',
				type: 'gauge',
				center: ['77%', '50%'],    // 默认全局居中
				radius: '25%',
				min: 0,
				max: 2,
				startAngle: 315,
				endAngle: 225,
				splitNumber: 2,
				axisLine: {            // 坐标轴线
					lineStyle: {       // 属性lineStyle控制线条样式
						width: 8
					}
				},
				axisTick: {            // 坐标轴小标记
					show: false
				},
				axisLabel: {
					formatter: function (v) {
						switch (v + '') {
							case '0' :
								return 'H';
							case '1' :
								return 'Water';
							case '2' :
								return 'C';
						}
					}
				},
				splitLine: {           // 分隔线
					length: 15,         // 属性length控制线长
					lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
						color: 'auto'
					}
				},
				pointer: {
					width: 2
				},
				title: {
					show: false
				},
				detail: {
					show: false
				},
				data: [{value: 0.5, name: 'gas'}]
			}
		]
	};

	setInterval(function () {
		option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
		option.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
		option.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
		option.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
		myChart.setOption(option, true);
	}, 2000);


	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
</script>
<script>
	var _hmt = _hmt || [];
	(function () {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
</script>
</body>
</html>